<script setup lang="ts"></script>
<template>
  <div class="home-card-wrapper">
    <div class="container-flex flex-between">
      <div class="icons">
        <slot name="icon"></slot>
      </div>
      <div class="card-info">
        <div class="title">
          <slot name="title"></slot>
        </div>
        <div class="desc">
          <slot name="desc"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-card-wrapper {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px #eeeeee;
  .icons {
    font-size: 40px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
    padding: 20px;
  }
  .card-info {
    padding: 0 30px;
    text-align: center;
    .title {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .desc {
      font-size: 18px;
      font-weight: bold;
    }
  }
  &:hover {
    cursor: pointer;
    .icons {
      background: #0a7468;
      color: #FFFFFF;
      border-radius: 10px;
    }
  }
}
</style>
